<!--
 * @Descripttion: 订单详情
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2022-01-25 10:14:00
-->
<template>
  <div class="lb-banquet-order-detail">
    <top-nav :isBack="true" />
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        label-width="130px"
        size="mini"
      >
        <lb-classify-title title="客户信息"></lb-classify-title>
        <div class="space-lg"></div>
        <div class="space-lg"></div>
        <el-form-item label="客户ID：">
          <div>{{ subForm.user_id }}</div>
        </el-form-item>
        <el-form-item label="微信昵称：">
          <div>{{ subForm.user_info.nickName }}</div>
        </el-form-item>
        <el-form-item label="客户手机号：" v-if="subForm.phone">
          <div>{{ subForm.phone }}</div>
        </el-form-item>
        <div class="space-lg"></div>
        <div class="space-lg"></div>
        <lb-classify-title title="预订信息"></lb-classify-title>
        <div class="space-lg"></div>
        <div class="space-lg"></div>
        <el-form-item label="预订时间：">
          <div>
            {{ subForm.time_date | handleTime(1) }}（{{ subForm.week }}）
            {{ subForm.time_type }}
          </div>
        </el-form-item>
        <el-form-item
          :label="`${item.key}：`"
          v-for="(item, index) in subForm.content"
          :key="index"
        >
          <div v-if="item.type !== 3 || (item.type === 3 && !item.value)">
            {{ item.value || '无' }}
          </div>
          <div class="flex-warp" v-if="item.type === 3 && item.value">
            <lb-cover
              :fileList="[{ url: item.value }]"
              :isToDel="false"
              fileType="image"
              type="more"
              size="small"
              :fileSize="1"
            ></lb-cover>
          </div>
        </el-form-item>
        <div class="space-lg"></div>
        <lb-classify-title title="订单信息"></lb-classify-title>
        <div class="space-lg"></div>
        <div class="space-lg"></div>
        <el-form-item label="系统订单号：" v-if="subForm.order_code">
          <div>{{ subForm.order_code }}</div>
        </el-form-item>
        <el-form-item label="商户订单号：" v-if="subForm.transaction_id">
          <div>{{ subForm.transaction_id }}</div>
        </el-form-item>
        <el-form-item label="下单时间：">
          <div>{{ subForm.create_time | handleTime }}</div>
        </el-form-item>
        <el-form-item label="支付时间：" v-if="subForm.pay_time">
          <div>{{ subForm.pay_time | handleTime }}</div>
        </el-form-item>
        <el-form-item label="订单状态：">
          <div>
            {{ payType[subForm.pay_type] }}
          </div>
        </el-form-item>
        <el-form-item label="预付金：">
          <div class="c-warning">¥ {{ subForm.place_price }}</div>
        </el-form-item>
        <el-form-item label="支付方式：">
          <div>{{ subForm.balance * 1 > 0 ? '储值支付' : '微信支付' }}</div>
        </el-form-item>
        <el-form-item label="场地所属公司：">
          <div>{{ subForm.company_name }}</div>
        </el-form-item>
        <el-form-item label="员工：">
          <div>{{ subForm.staff_name }}</div>
        </el-form-item>
      </el-form>
      <div class="space-lg"></div>
      <lb-classify-title title="场地信息"></lb-classify-title>
      <div class="space-lg"></div>
      <el-table
        v-loading="loading"
        :data="[subForm]"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column label="封面图" width="180">
          <template slot-scope="scope">
            <lb-image :src="scope.row.place_cover" />
          </template>
        </el-table-column>
        <el-table-column prop="place_title" label="场地名称"> </el-table-column>
        <el-table-column prop="table_text" label="容纳桌数"> </el-table-column>
        <el-table-column prop="place_price" label="预付金">
          <template slot-scope="scope">
            {{ subForm.price_face === 1 ? '面议' : `¥${subForm.place_price}` }}
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <lb-button type="primary" @click="$router.back(-1)">{{
          $t('action.back')
        }}</lb-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      payType: {
        '-1': '已取消',
        '1': '待付款',
        '2': '已完成'
      },
      subForm: {},
      total: 0
    }
  },
  async created () {
    let { id } = this.$route.query
    this.subForm.id = id
    this.getDetail()
  },
  methods: {
    async getDetail () {
      let { id } = this.subForm
      this.$api.banquet.orderInfo({ id }).then(res => {
        console.log(res)
        if (res.code === 200) {
          let { data } = res
          this.subForm = data
        }
      })
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-banquet-order-detail {
  width: 100%;
  .order-info-box {
    width: 100%;
    margin: 10px 0 30px 0;
    min-width: 400px;
    .info-item {
      width: 100%;
      display: flex;
      align-items: center;
      margin: 10px 0;
      .label {
        color: #aaafbb;
        width: 130px;
        min-width: 130px;
        text-align: right;
        margin-right: 10px;
      }
      .value {
        color: #424753;
      }
      .redColor {
        color: #e95260;
      }
    }
  }
  .info-warper {
    display: flex;
  }
  .el-table {
    img {
      width: 60px;
      height: 60px;
    }
  }
  .count {
    margin-left: 10px;
  }
}
</style>
